
<template>
  <el-dialog v-model="ifShow" :title="modelTitle" width="1000" :before-close="handleCancel">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="auto" class="demo-ruleForm" status-icon>
      <el-form-item label="公司名称" prop="companyName">
        <el-input v-model="formData.companyName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="队长姓名" prop="captainName">
        <el-input v-model="formData.captainName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="队长手机" prop="captainPhone">
        <el-input v-model="formData.captainPhone" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="队长车牌" prop="captainCarNo">
        <el-input v-model="formData.captainCarNo" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="formData.status" placeholder="请选择" size="large">
          <el-option :value="0" label="冻结"></el-option>
          <el-option :value="1" label="正常"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="进单策略" prop="orderStrategy">
        <el-select v-model="formData.orderStrategy" placeholder="请选择" size="large">
          <el-option :value="0" label="改派"></el-option>
          <el-option :value="1" label="抢单"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="提现状态" prop="withdrawStatus">
        <el-radio-group v-model="formData.withdrawStatus">
          <el-radio :value="0">冻结</el-radio>
          <el-radio :value="1">正常</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="司机提现策略" prop="withdrawDriverStrategy">
        <el-radio-group v-model="formData.withdrawDriverStrategy">
          <el-radio :value="1">周结</el-radio>
          <el-radio :value="2">日结</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="提现时间" prop="withdrawTime" v-if="formData.withdrawStatus == 1">
        <el-date-picker placeholder="提现时间" v-model="formData.withdrawTime" value-format="YYYY-MM-DD 00:00:00" style="width: 100%" />
      </el-form-item>
      <el-form-item label="提现账户" prop="withdrawAccount">
        <el-input v-model="formData.withdrawAccount" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="提现账户名" prop="withdrawName">
        <el-input v-model="formData.withdrawName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="钉钉群token" prop="dingTalkToken">
        <el-input v-model="formData.dingTalkToken" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="钉钉群secret" prop="dingTalkSecret">
        <el-input v-model="formData.dingTalkSecret" placeholder="请输入"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleOk">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import CommonApi from "@/api/common";
import Supplier from "@/api/supplier";

const props = defineProps<{}>();
const emit = defineEmits(["success"]);
const formRef = ref(null);
let formData = ref({
  id: "",
  companyName: "",
  withdrawTime: "",
  captainName: "",
  captainPhone: "",
  captainCarNo: "",
  status: undefined,
  dingTalkToken: "",
  dingTalkSecret: "",
  withdrawStatus: 0,
  withdrawDriverStrategy: 1,
  orderStrategy: 0,
  withdrawAccount: "",
  withdrawName: "",
});
const rules = reactive({
  withdrawStatus: [{ required: true, message: "请选择提现状态!" }],
  captainName: [{ required: true, message: "请输入队长姓名!" }],
  captainPhone: [{ required: true, message: "请输入队长手机!" }],
  captainCarNo: [{ required: true, message: "请输入队长车牌!" }],
  companyName: [{ required: true, message: "请输入公司名称!" }],
  status: [{ required: true, message: "请输入状态 0冻结 1正常!" }],
  orderStrategy: [{ required: true, message: "请选择!" }],
  // withdrawAccount: [{ required: true, message: "请输入!" }],
  // withdrawName: [{ required: true, message: "请输入!" }],
});
const ifShow = ref(false);
const modelTitle = ref();
function edit(title: any, row: any) {
  modelTitle.value = title;
  ifShow.value = true;
  if (title == "新增") {
    formData.value = {
      id: "",
      companyName: "",
      withdrawTime: "",
      captainName: "",
      captainPhone: "",
      captainCarNo: "",
      status: undefined,
      dingTalkToken: "",
      dingTalkSecret: "",
      withdrawStatus: 0,
      withdrawDriverStrategy: 1,
      orderStrategy: 0,
      withdrawAccount: "",
      withdrawName: "",
    };
  }

  Object.assign(formData.value, row);
}

/**
 * 确定按钮点击事件
 */
async function handleOk() {
  await formRef.value.validate((valid, fields) => {
    if (valid) {
      if (formData.value.withdrawStatus == 1 && !formData.value.withdrawTime) {
        ElMessage.info("请选择提现时间");
        return;
      }

      Supplier.editSupplier(formData.value).then((res) => {
        if (res.code == 0) {
          ElMessage.success(res.message);
          formRef.value.resetFields();
          emit("success");
          handleCancel();
        }
      });
    } else {
      console.log("error submit!", fields);
    }
  });
}

/**
 * 取消按钮回调事件
 */
function handleCancel() {
  formRef.value.resetFields();
  ifShow.value = false;
}

defineExpose({
  edit,
});
onMounted(() => {});
</script>
<style lang="scss" scoped>
.container {
  font-size: 16px;
  padding: 14px;
  .info {
    margin-top: 22px;
    .aud {
      margin-top: 14px;
      width: 38%;
    }
  }
}
</style>
